<template>
  <!-- <baidu-map id="allmap" @ready="mapReady"> 1</baidu-map> -->
  <div>
    <!-- <div class="input-group mb-3">
      <input
        type="text"
        class="form-control"
        placeholder=""
        aria-label="Example text with button addon"
        aria-describedby="button-addon1"
        v-model="search"
      />
      <button
        class="btn btn-outline-secondary"
        type="button"
        id="button-addon1"
        @click="searchMap"
      >
        搜索
      </button>
    </div> -->
    <div class="fiexd-wrapper">
      <div
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="searchPeriphery(item)"
      >
        {{ item.name }}
      </div>
    </div>

    <div id="container" style="width: 100%; height: 100vh"></div>

    <div class="map_artical" v-if="false">
      <div class="artical_tit">
        <span class="sort">
          <span class="sort_bg"></span>
          <span class="default curr">默认</span>
          <span class="total">总价</span>
        </span>
        <span id="houseListTitle" inittitle="区域推荐二手房房源"
          >中粮云景国际北...&nbsp;<em class="cffba00 ml10">2</em>套</span
        >
      </div>
      <div class="house_list_content">
        <div class="artical_cont" style="height: 806px">
          <ul>
            <li v-for="(item, index) in [1, 2, 3]" :key="index">
              <img
                src="https://fang-community.leyoujia.com/community/hsl-jjrplus/2020-06/21/15/8ac868e2-619d-4ba6-a68a-cbcc0c98f397.jpg?imageView2/2/w/120/h/90"
                class="house-img"
              />
              <div class="artical_right">
                <p class="over-flow-hide">
                  <strong> 中粮云景北区 </strong>
                </p>
                <p class="over-flow-hide">
                  <span class="fl">1房0厅</span>
                  <span class="line"></span>68㎡
                </p>
                <p class="over-flow-hide">
                  <span class="fr"> <b class="num">249</b>万 </span>
                  中粮云景国际北区
                </p>
                <p class="last labs">
                  <span class="zfy">真房源</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  onMounted,
  nextTick,
  reactive,
  toRefs,
  watch,
  ref,
  computed,
} from "vue";
// import BMap from "BMap";
import BMapGL from "BMap";
import { houseList, araeList, xq } from "./baiduMap";
import bg from "@/assets/images/4.png";
import gjc from "@/assets/images/gjc.png";
import yy from "@/assets/images/yy.png";
import xx from "@/assets/images/xx.png";
import yh from "@/assets/images/yh.png";
import cs from "@/assets/images/cs.png";
export default defineComponent({
  setup() {
    const data = reactive({
      search: "",
      map: null,
      list: [
        { name: "公交", img: gjc },
        { name: "医院", img: yy },
        { name: "超市", img: cs },
        { name: "银行", img: yh },
        { name: "学校", img: xx },
      ],
      zoom: 0,
      cityShow: false,
      // typeShow: computed(()=> data.zoom >= 12 ? 'area' :'city')
    });

    let zoom = ref(0);
    watch(zoom, (newProps, oldProps) => {
      if (newProps <= 13) markerFun(houseList, 13);
      if (newProps >= 14 && newProps < 16) {
        console.log("watch");
        markerFun(araeList, 14);
      }
      if (newProps >= 16) markerFunXq(xq);
    });

    const searchMap = () => {
      var myGeo = new BMapGL.Geocoder();
      myGeo.getPoint(
        data.search,
        function (point) {
          if (point) {
            data.map.centerAndZoom(point, 16);
            data.map.addOverlay(
              new BMapGL.Marker(point, { title: data.search })
            );
          } else {
            alert("您选择的地址没有解析到结果！");
          }
        },
        "广东省"
      );
    };

    const searchPeriphery = (type) => {
      removeOverlay("circle");
      var Bounds = data.map.getBounds();
      var pt = Bounds.getCenter();
      var mPoint = new BMapGL.Point(pt.lng, pt.lat);

      var circle = new BMapGL.Circle(mPoint, 2000, {
        fillColor: "black",
        strokeWeight: 1,
        fillOpacity: 0.3,
        strokeOpacity: 0.3,
      });
      circle._name = "circle";
      // data.map.addOverlay(marker);
      data.map.addOverlay(circle);

      var local = new BMapGL.LocalSearch(data.map, {
        renderOptions: {
          map: data.map,
          panel: "r-result",
          autoViewport: false,
          selectFirstResult: false,
        },
        onMarkersSet: function (LocalResultPoi) {
          const iconImg = new BMap.Icon(type.img, new BMap.Size(30, 30));
          iconImg.setImageSize(new BMap.Size(30, 30));
          LocalResultPoi.forEach((e) => {
            e.marker.setIcon(iconImg);
          });
        },
      });

      local.searchNearby(type.name, mPoint, 2000);
    };

    const newMap = () => {
      data.map = new BMapGL.Map("container", { minZoom: 10, maxZoom: 18 });
      data.map.centerAndZoom("深圳市", 12);
      data.map.enableScrollWheelZoom();
      data.map.addEventListener("zoomend", (e) => {
        zoom.value = data.map.getZoom();
      });
      markerFun(houseList, 13);
    };

    const getBdary = (name) => {
      let bdary = new BMap.Boundary();
      bdary.get(name, function (rs) {
        //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        var EN_JW = "180, 90;"; //东北角
        var NW_JW = "-180,  90;"; //西北角
        var WS_JW = "-180, -90;"; //西南角
        var SE_JW = "180, -90;"; //东南角
        //添加环形遮罩层
        var ply1 = new BMap.Polygon(
          rs.boundaries[0] + SE_JW + SE_JW + WS_JW + NW_JW + EN_JW + SE_JW,
          {
            strokeColor: "none",
            fillColor: "rgba(0,0,0,0.5)",
            fillOpacity: 1,
            strokeOpacity: 0.5,
          }
        ); //建立多边形覆盖物
        // data.map.addOverlay(ply1);

        var ply = new BMap.Polygon(rs.boundaries[0], {
          strokeWeight: 3,
          strokeColor: "#3f85ff",
          fillColor: "rgba(63, 133, 255,0.5)",
        });
        ply1._name = "bdary";
        ply._name = "bdary";
        data.map.addOverlay(ply);
        // data.map.setViewport(ply.getPath());//调整视野
      });
    };

    const removeOverlay = (name) => {
      let all = data.map.getOverlays();
      all.forEach((item) => {
        if (item._name == name) {
          data.map.removeOverlay(item);
        }
      });
    };

    const markerFun = (list, num) => {
      data.map.clearOverlays();
      list.forEach((e, i) => {
        let pointNumber = new BMap.Point(e.lng, e.lat);
        const content = `<div class="marker1" id="mark">${e.name}区<br/>${e.houseTotal}套</div>`;
        var label = new BMap.Label(content);
        label.setStyle({
          background: "transparent",
          border: "none",
        });
        const myIcon = new BMap.Icon(bg, new BMap.Size(90, 90));
        let markers = new BMap.Marker(pointNumber, { icon: myIcon });
        data.map.addOverlay(markers);
        markers.setLabel(label);
        markers.addEventListener("click", function (event) {
          removeOverlay("bdary");
          data.map.removeOverlay(markers);
          data.map.centerAndZoom(pointNumber, num);
          data.map.getZoom() < 14 ? data.map.setZoom(14) : data.map.setZoom(16);
        });
        markers.addEventListener("mouseover", function (event) {
          event.target.ed.classList.add("marker2");
          data.map.getZoom() < 14 && getBdary(e.name);
        });
        markers.addEventListener("mouseout", function (event) {
          event.target.ed.classList.remove("marker2");
          removeOverlay("bdary");
        });
      });
    };

    const markerFunXq = (list) => {
      data.map.clearOverlays();
      list.forEach((e, i) => {
        let pointNumber = new BMap.Point(e.lng, e.lat);
        const content = `<div class="xq-box" id="mark">${e.name} <span>${e.houseTotal}套</span> </div>`;
        var label = new BMap.Label(content);
        label.setStyle({
          background: "transparent",
          border: "none",
          cursor: "pointer",
        });

        const myIcon = new BMap.Icon(bg, new BMap.Size(0, 0));
        let markers = new BMap.Marker(pointNumber, {
          icon: myIcon,
        });

        data.map.addOverlay(markers);
        markers.setLabel(label);

        label.addEventListener("mouseover", function (e) {
          markers.setTop(true);
        });
        label.addEventListener("mouseout", function (e) {
          markers.setTop(false);
        });
        label.addEventListener("click", function (event) {
          console.log(e.code);
          console.log("label点击");
        });
      });
    };

    onMounted(() => {
      nextTick(() => {
        newMap();
      });
    });

    return {
      ...toRefs(data),
      searchMap,
      searchPeriphery,
      zoom,
    };
  },
});
</script>


<style lang="scss">
.map_artical {
  position: absolute;
  right: 0;
  top: 132px;
  bottom: 0;
  width: 390px;
  background: #fff;
  overflow: hidden;
  z-index: 1;
  -webkit-box-shadow: -2px 2px 7px #ccc;
  -moz-box-shadow: -2px 2px 7px #ccc;
  box-shadow: -2px 2px 7px #ccc;
  .artical_tit {
    padding: 0 10px;
    height: 36px;
    line-height: 36px;
    background-color: #3f85ff;
    color: #fff;
    em {
      color: #ffba00;
      margin-left: 10px;
      font-weight: normal;
      font-style: normal;
    }
    .sort {
      float: right;
      margin: 5px 0;
      line-height: 26px;
      height: 26px;
      position: relative;
      z-index: 20;
      font-size: 12px;
      background-color: rgba(0, 0, 0, 0.3);

      .default {
        border-left: none;
        color: #ffba00;
        display: block;
        float: left;
        height: 26px;
        padding: 0 7px;
        position: relative;
        cursor: pointer;
      }
      .total {
        display: block;
        float: left;
        color: #fff;
        height: 26px;
        padding: 0 7px;
        position: relative;
        z-index: 21;
        border-left: 1px solid #333;
        cursor: pointer;
      }
    }
  }
  .house_list_content {
    .artical_cont {
      width: 100%;
      font-size: 14px;
      overflow-y: auto;
      overflow-x: hidden;
      height: 846px;
      ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
      }
      li {
        padding: 20px 15px;
        overflow: hidden;
        border-bottom: 1px dashed #ccc;
        cursor: pointer;
        display: flex;
        &:hover {
          background-color: #e4e4e4;
        }
        .house-img {
          display: block;
          margin-right: 10px;
          width: 120px;
          height: 90px;
        }
        .artical_right {
          width: 210px;
          overflow: hidden;
          p {
            line-height: 20px;
            padding-bottom: 4px;
            margin: 0;
          }
          .over-flow-hide {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .line {
            margin: 3px 10px;
            width: 1px;
            height: 14px;
            background-color: #ccc;
          }
          .fr {
            float: right;
            .num {
              color: #e03236;
              font-size: 18px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}

.xq-box {
  color: #fff;
  background: #3f85ff;
  padding: 6px 10px;
  border-radius: 12px;
  position: relative;
  box-shadow: 3px 3px 3px #848484;
  border: 1px solid #fff;
  span {
    background: #fff;
    border-radius: 4px;
    color: #3f85ff;
    padding: 0 4px;
  }
  &::before {
    content: "";
    position: absolute;
    bottom: -17px;
    left: 17px;
    border-bottom: 10px solid transparent;
    border-top: 10px solid #3f85ff;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent;
  }
  &:hover {
    &::before {
      border-top: 10px solid #e03236;
    }
    span {
      color: #e03236;
    }
    background: #e03236;
    z-index: 9999999 !important;
  }
}
.marker1 {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90px;
  width: 90px;
  overflow: hidden;
  background: transparent;
  color: #fff;
  border: none;
  line-height: 20px;
  z-index: 9999;
  cursor: pointer;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  transition: all 0.3s;
  &:hover {
    color: red;
  }
}
.marker2 {
  background: url("../../assets/images/5.png");
  img {
    display: none;
  }
}


.fiexd-wrapper {
  position: fixed;
  z-index: 999;
  top: 200px;
  left: 20px;
  .item {
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 14px;
    text-align: center;
    line-height: 50px;
    margin-top: 20px;
    cursor: pointer;
  }
}
</style>
